<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>管理员登录</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="/css/element/index.css">
    <!-- import Vue before Element -->
    <script src="/js/vue.js"></script>
    <!-- import JavaScript -->
    <script src="/js/element/index.js"></script>
    <!--axios-->
    <script src="/js/axios.min.js"></script>
    <style>
        .el-header, .el-footer {
            background-color: #B3C0D1;
            color: #333;
            text-align: center;
            line-height: 60px;
        }

        .el-aside {
            background-color: whitesmoke;
            color: #333;
            text-align: center;
            line-height: 200px;
        }

        .el-main {
            background-color: #E9EEF3;
            color: #333;
            text-align: center;
            line-height: 60px;
            padding-top: 0px;
            padding-bottom: 0px;
            overflow: hidden;
        }

        body > .el-container {
            margin-bottom: 40px;
        }

        .el-container:nth-child(5) .el-aside,
        .el-container:nth-child(6) .el-aside {
            line-height: 260px;
        }

        .el-container:nth-child(7) .el-aside {
            line-height: 320px;
        }

        /**/
    </style>
</head>
<body style="margin: 0">
<div id="app">
    <el-container>
        <el-header style="padding-left: 0;padding-right: 0">
            <!--导航栏-->
            <el-menu :default-active="'1'"
                     class="el-menu-demo"
                     mode="horizontal"
                     background-color="#545c64"
                     text-color="#fff"
                     active-text-color="#ffd04b">
                <el-menu-item index="1" onclick="javascript:location.href='index.html'">首页</el-menu-item>
                <el-menu-item index="2" onclick="javascript:location.href='myreserve.html'">我的预约</el-menu-item>
                <el-menu-item index="3" disabled>消息中心</el-menu-item>
                <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">访问官网</a></el-menu-item>
            </el-menu>
        </el-header>

        <el-container>
            <el-aside width="15%"></el-aside>
            <el-main>
                <el-alert title="这是管理员登录界面，请游客和普通用户止步" type="warning" show-icon></el-alert>
                <el-divider></el-divider>
                <!--表单-->
                <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="120px">
                    <el-form-item label="用户名" prop="username">
                        <el-input v-model="ruleForm.username" type="text"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <el-input v-model="ruleForm.password" show-password></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
                        <el-button @click="resetForm('ruleForm')">重置</el-button>
                    </el-form-item>
                </el-form>
                <el-divider></el-divider>
                已登录？进入
                <el-link type="primary" href="./admin/admin.html">管理员页面</el-link>
            </el-main>
            <el-aside width="15%"></el-aside>
        </el-container>

        <el-footer>© 2020 中国地质大学（武汉） .Powered by CUG. | 服务器状态 | Donate</el-footer>
    </el-container>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            ruleForm: {
                username: null,
                password: null
            },
            rules: {
                username: [
                    {required: true, message: '请输入用户名称', trigger: 'blur'},
                    {min: 3, max: 8, message: '长度在 3 到 8 个字符', trigger: 'blur'}
                ],
                password: [
                    {required: true, message: '请输入用户名称', trigger: 'blur'},
                    {min: 4, message: '长度在 4 个字符以上', trigger: 'blur'}
                ]
            }
        },
        methods: {
            submitForm: function (formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.login(this.ruleForm.username, this.ruleForm.password);
                    } else {
                        this.showMessage('warning', '输入信息不合法');
                        return false;
                    }
                });
            },
            resetForm: function (formName) {
                this.$refs[formName].resetFields();
            },
            login: function (username, password) {
                var that = this;
                axios({
                    method: "post",
                    url: "/admin/login",
                    params: {
                        username: username,
                        password: password
                    },
                }).then(function (response) {
                    if (response.data.flag) {
                        window.location.href = "/admin/admin.html";
                    } else {
                        that.showMessage('error', response.data.msg);
                    }
                }, function (err) {
                    console.log(err);
                });
            },
            showMessage: function (type, message) {
                this.$message({
                    message: message,
                    type: type
                });
            }
        }
    });

</script>
</body>
</html>